<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>潍坊中医定制大屏</title>
    <link rel="stylesheet" href="assets/css/index.css">

    <script src="assets/js/echarts.min.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/flexible.js"></script>
</head>

<body>
    <section class="container-weifang">
        <header>
            实时监控大屏
        </header>
        <div id="container-body" style="display: flex;">
            <div class="device">
                <div class="device-title">
                    <div class="title-name">煎药机组状态</div>
                    <div class="device-statue">
                        <div class="device-statue-item">
                            <div class="device-statue-item-normal"></div>
                            正常
                        </div>
                        <div class="device-statue-item">
                            <div class="device-statue-item-busy"></div>
                            忙碌
                        </div>
                        <div class="device-statue-item">
                            <div class="device-statue-item-close"></div>
                            关机
                        </div>
                    </div>
                </div>
                <section id="device-body">
                    <div class="device-body-row">
                        <div class="device-body-row-title">
                            J11
                        </div>
                        <div class="device-body-row-card">
                            <div style="display: flex;align-items: center;line-height: 24px;">
                                <div class="card-title">01</div>
                                <div class="card-spot">
                                </div>
                            </div>
                            <div class="row-card-img">
                                <img src="assets/images/bzj_default.png" alt="">
                            </div>
                            <div>
                                <div class="row-card-process">完成进度</div>
                                <div class="row-card-step">25%</div>
                            </div>
                        </div>
                        <div class="device-body-row-card">
                            <div style="display: flex;align-items: center;line-height: 24px;">
                                <div class="card-title">01</div>
                                <div class="card-spot">
                                </div>
                            </div>
                            <div class="row-card-img">

                            </div>
                            <div>
                                <div class="row-card-process">完成进度</div>
                                <div class="row-card-step">25%</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <section id="body-right" style="margin-left: 20px;">
                <div class="chart">
                    <div class="chart-title">
                        <div class="title-name">温度曲线</div>
                    </div>
                    <div id="container-chart">

                    </div>
                </div>
                <div class="process">
                    <div class="process-title">
                        <div class="title-name">流程信息</div>
                    </div>
                    <div id="container-process">
                        <section style="display: flex;">
                            <div class="container-process-img"></div>
                            <div id="process-title">正在调剂</div>
                            <div class="container-process-img"></div>
                        </section>
                        <section style="width: 90%;margin: 0 auto;">
                            <div id="table">
                                <div id="table-header" style="display: flex;font-size: 16px;">
                                    <div>处方来源</div>
                                    <div>处方号</div>
                                    <div>患者姓名</div>
                                    <div>包装人员</div>
                                    <div>操作时间</div>
                                </div>
                                <div id="table-body">
                                    <div class="table-body-row">
                                        <div>宁夏中医院</div>
                                        <div>R123456789</div>
                                        <div>吴云鹏</div>
                                        <div>吴云鹏</div>
                                        <div>2024-10-21 31:21:54</div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </section>
        </div>
        <footer>技术支持：北京东华原医疗设备有限责任公司</footer>
    </section>
</body>

</html>


<!-- 加载温度曲线数据 -->
<script>
    var charttest = [{
        name: "图例一1111111111111",
        color: "pink",
        type: "line",
        data: [, 10, 11, 13, 11, 12, 9]
    }, {
        name: "图例二2222222222222222",
        color: "yellow",
        type: "line",
        data: [3, 2, 4, 8, 15, 7, 6]
    }, {
        name: "图例三33333333333333333",
        color: "green",
        type: "line",
        data: [1, 2, 2, 5, 3, 2, 2]
    }, {
        name: "图例四444444444444444444",
        color: "green",
        type: "line",
        data: [1, 2, 6, 8, 9, 1, 2]
    }, {
        name: "图例五55555555555555555",
        color: "green",
        type: "line",
        data: [1, 55, 64, 15, 3, 2, 2]
    }, ]

    function FillData(data = [], len = 12) {

    }

    var time_step = "5";
    var axisData = ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', '5:50', '6:00']; // x轴  时间

    LoadTemperatureEChart(charttest, axisData);

    function LoadTemperatureEChart(seriesdata, axisData) {
        var chartDom = document.getElementById('container-chart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                y: 'bottom',
                type: "scroll",
                icon: 'circle',
                itemWidth: 10,
                textStyle: {
                    color: "white"
                }
            },
            grid: {
                top: "5%"
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: axisData,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "white"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'white',
                        type: "dashed",
                        dashOffset: 5
                    }
                }
            },
            yAxis: {
                type: 'value',
                // min: 0,
                // max: 200,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "white"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#fff',
                        type: "dashed",
                        dashOffset: 10
                    }
                }
            },
            series: seriesdata
        };

        option && myChart.setOption(option);
        window.onresize = function() {
            myChart.resize();
        };

    }
</script>


<!-- 加载煎药机组状态数据 -->
<script>
    var deviceData = [{
            name: "J11", //机组名称
            devicelist: [{
                status: "normal", //设备状态 normal 正常 , busy 忙碌,close 关机
                progress: "55%", //设备进度
                type: "jyj" //设备类型   jyj 煎药机, bzj 包装机
            }, {
                status: "busy",
                progress: "25%",
                type: "jyj"
            }, {
                status: "normal",
                progress: "15%",
                type: "jyj"
            }, {
                status: "close",
                progress: "100%",
                type: "bzj"
            }, {
                status: "busy",
                progress: "0%",
                type: "bzj"
            }, ]
        }, {
            name: "J21", //机组名称
            devicelist: [{
                status: "normal",
                progress: "55%",
                type: "jyj"
            }, {
                status: "close",
                progress: "77%",
                type: "bzj"
            }]
        }, {
            name: "J31",
            devicelist: [{
                status: "normal",
                progress: "55%",
                type: "jyj"
            }]
        }, {
            name: "J41",
            devicelist: [{
                status: "normal",
                progress: "55%",
                type: "jyj"
            }, {
                status: "close",
                progress: "77%",
                type: "bzj"
            }]
        }, {
            name: "J51",
            devicelist: [{
                status: "normal",
                progress: "55%",
                type: "jyj"
            }, {
                status: "close",
                progress: "77%",
                type: "bzj"
            }]
        }, {
            name: "J61",
            devicelist: [{
                status: "normal",
                progress: "55%",
                type: "jyj"
            }, {
                status: "close",
                progress: "77%",
                type: "bzj"
            }]
        }


    ];


    LoadDeviceData(deviceData);

    function LoadDeviceData(data = []) {
        var deviceBody = document.getElementById("device-body");
        $("#device-body").empty();
        //控制行
        for (var i = 0; i < data.length; i++) {
            let rowdata = data[i];

            let row = document.createElement("div");
            row.classList.add("device-body-row");
            //title
            let row_title = document.createElement("div");
            row_title.classList.add("device-body-row-title");
            row_title.innerHTML = rowdata.name;
            row.appendChild(row_title);
            //card
            for (var j = 0; rowdata.devicelist && j < rowdata.devicelist.length; j++) {
                let data = rowdata.devicelist[j];
                let row_card = document.createElement("div");
                row_card.classList.add("device-body-row-card");
                let card_html = '<div style="display: flex;align-items: center;line-height: 24px;">' +
                    '<div class="card-title">0' + (j + 1) + '</div>' +
                    '<div class="card-spot card-spot-' + data.status + '">' +
                    '</div>' +
                    '</div>' +
                    '<div class="row-card-img ' + GetImgClassName(data.type, data.progress) + '">' +
                    '</div>' +
                    '<div>' +
                    '<div class="row-card-process">完成进度</div>' +
                    '<div class="row-card-step">' + data.progress + '</div>'
                '</div>';
                row_card.innerHTML = card_html;
                row.appendChild(row_card);
            }

            deviceBody.appendChild(row);
        }

    }


    function GetImgClassName(type, value) {
        let className = "";
        switch (type) {
            case "jyj":
                className = "row-card-name-jyj";
                break;
            case "bzj":
                className = "row-card-name-bzj";
                break;
            default:
                className = "row-card-name-jyj";
        }
        if (value == "0%") {
            return className + "-unable";
        }
        return className;
    }
</script>


<!-- 加载流程信息数据 -->

<script>
    var processdata = Array.from({
        length: 50
    }).map((el, idx) => {
        return {
            "处方来源": "宁夏中医院" + idx,
            "处方号": "R123456789",
            "患者姓名": "吴云鹏",
            "包装人员": "吴云鹏",
            "操作时间": "2024-10-21 31:21:54"
        }
    });


    settableName("调剂测试")
    settableHeader(["处方来源1", "处方号", "患者姓名", "包装人员", "操作时间"]);
    LoadProcessData(processdata);


    //设置表格名称
    function settableName(name) {
        $("#process-title").text(name);
    }

    //设置表格列名
    function settableHeader(header = []) {
        $("#table-header").empty();
        for (var i = 0; i < header.length; i++) {
            let item = document.createElement("div");
            item.innerHTML = header[i];
            $("#table-header").append(item);
        }
    }

    //设置表格内容
    function LoadProcessData(data = []) {
        $("#table-body").empty();
        let fragment = document.createDocumentFragment();
        for (var i = 0; i < data.length; i++) {
            let row = document.createElement("div");
            row.classList.add("table-body-row");
            for (var key in data[i]) {
                let item = document.createElement("div");
                item.innerHTML = data[i][key];
                row.appendChild(item);
            }
            fragment.appendChild(row);
        }
        $("#table-body").append(fragment);
        $("#table").toggleClass("scaleAnmi");
    }
</script>


<!-- 滚动动画 -->
<script>
    var timerdevice = null;
    var timertable = null;
    let step = 2; //每次走的步长
    let orgintop = -25; //初始距离上位置
    let topval = orgintop; //距离上位置
    let containerdevice = $("#device-body")[0];

    let step_table = 1;
    let topval_table = 0;
    let containertable = $("#table-body")[0];

    $(function() {

        //滚动类
        Scroll = function(container, top, step) {
            this.container = container; //操作容器对象
            //判断是否container可以滚动
            this.poor = container.scrollHeight - container.offsetHeight; //是否内容大于容器
            this.orgintop = top;
            this.top = top; //内容与容器的距离
            this.step = step; //步长
        };

        Scroll.prototype = {
            //更新参数
            update: function() {
                //判断是否到底部
                if (this.poor > this.top && this.top >= this.orgintop) {
                    this.top += this.step;
                } else if (this.poor <= this.top || this.top <= 0) {
                    this.step *= -1; //反向
                    this.top += this.step;
                    // this.top = 0; //直接回到顶部
                }
            },
            //执行动画
            draw: function() {
                this.container.scrollTo({
                    top: this.top, // 滚动到top像素的位置
                    behavior: 'smooth' // 平滑滚动
                });
            }
        }



        //初始化滚动函数
        function initScroll() {

            initDeviceScroll();
            initTableCroll();
        }



        initScroll();


    })

    function initDeviceScroll() {

        let s = new Scroll(containerdevice, orgintop, step);

        function update() {
            s.update();
        };

        function draw() {
            s.draw();
        };

        function loop() {
            update();
            draw();
        };

        //关闭上次动画
        window.clearInterval(timerdevice);
        timer = null;
        //开启动画
        timerdevice = setInterval(loop, 50);

    }

    function initTableCroll() {

        let b = new Scroll(containertable, topval_table, step_table);

        function update() {
            b.update();
        };

        function draw() {
            b.draw();
        };

        function loop() {
            update();
            draw();
        };

        //关闭上次动画
        window.clearInterval(timertable);
        timertable = null;
        //开启动画
        timertable = setInterval(loop, 100);

    }
</script>